<template>
    <div class="con">
      <div class="selectPos"><el-select
          :teleported="false"
          style="width: 150px"
          size="small"
          clearable
          placeholder="请选择塔吊"
          v-model="typeWork"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select></div>
      <div class="numberBox">
        <div class="list">
          <span class="top">16</span>
          <span class="bottom">在线</span>
        </div>
        <div class="list">
          <span class="top">16</span>
          <span class="bottom">在线</span>
        </div>
        <div class="list">
          <span class="top">16</span>
          <span class="bottom">在线</span>
        </div>
        <div class="list">
          <span class="top">16</span>
          <span class="bottom">在线</span>
        </div>
      </div>
      <div class="flexBox">
        <div><div id="towerEcharts" class="echarts"></div></div>
        <div class="detailBox">
          <div class="left">
            <p class="name">1#电箱</p>
            <p class="state">状态：正常</p>
            <p class="state">司机：王克利</p>
          <p class="state">电话：12311313131</p>
          </div>
          <div class="right">
            <div class="top"><p>塔吊实时信息</p></div>
            <div class="bottom">
              <div class="list">
                <p>1#电箱</p>   
              </div>
              <div class="list">
                <p>楼电流状态：正常</p>
              </div>
              <div class="list">
                <p>电缆温度：正常</p>
              </div>
              <div class="list">
                <p>环境温度：正常</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name:'homeArea6',
    data() {
      return {
        option: {
          title: {
            show: true,
            text: "塔吊",
            textStyle: {
              color: "#0054bb",
            },
            left: "25%",
            top: "45%",
          },
          
          tooltip: {
            trigger: "item",
          },
          legend: {
            bottom: "0%",
            left: "center",
            textStyle: {
              color: "#ccc",
            },
            icon: "circle",
          },
          series: [
            {
              name: "塔吊",
              type: "pie",
              radius: ["50%", "60%"],
              avoidLabelOverlap: false,
              left:'-95px',
              label: {
                show: false,
                position: "center",
                color: "#ccc",
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: "normal",
                  // color:'#ccc'
                },
              },
              labelLine: {
                show: true,
              },
              data: [
                { value: 1048, name: "在线" },
                { value: 735, name: "离线" },
                { value: 580, name: "预警" },
                { value: 484, name: "报警" },
              ],
            },
          ],
        },
      };
    },
    mounted() {
      setTimeout(() => {
        const myCharts = this.$echarts.init(
          document.getElementById("towerEcharts")
        );
        myCharts.setOption(this.option);
      }, 500);
    },
  };
  </script>
  
  <style lang="scss" scoped>
  
  .con {
    position: relative;
    .selectPos{
      position: absolute;
      top:-37px;
      right:30px;
    }
    .numberBox {
      margin: 0 20px;
      display: flex;
      justify-content: space-evenly;
      .list {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    .flexBox {
      display: flex;
      justify-content: space-between;
      .detailBox{
        width:100%;
        height: 180px;
        box-sizing: border-box;
        background-color: #073e68;
        border-radius:4px;
        margin: 10px;
        position: relative;
        .left{
          color:#1994f3;
          position: absolute;
          left:-134px;
          top:30px;
          
          .name{
            font-size:18px;
          }
          .state{
            font-size:14px;
            line-height: 30px;
          }
        }
        .right{
          height: 180px;
          .top{
            width: 100%;
            height: 34px;
            border-radius:4px;
            text-align: center;
            line-height: 34px;
            background-color: #1b92ed;
          }
          .bottom{
            .list{
              height: 25px;
              font-size: 15px;
              line-height: 25px;
              margin:10px 0 0 10px;
            }
          }
        }
      }
      .echarts {
        width: 280px;
        height: 200px;
      }
    }
  }
  </style>